.detail{
	// 广告 + 收藏
	.banner{
		position: relative;
		.swiper{
			width: 100%;
			height: 634rpx;
			.item{
				.img{
					width: 100%;
					height: 100%;
				}
			}
		}
		.collected{
			position: absolute;
			top: 634rpx;
			right: 100rpx;
			width: 100rpx;
			height: 100rpx;
			margin-top: -50rpx;
			background: #354e44;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	// 价格 + 名字 + 介绍
	.content{
		padding: 68rpx;
		.price{
			display: flex;
			align-items: baseline;
			.num{
				font-size: 32rpx;
				line-height: 60rpx;
				color: #f2270c;
				display: flex;
				align-items: baseline;
				font-weight: 700;
				.big{
					font-size: 60rpx;
				}
			}
			.text{
				position: relative;
				margin-left: 10rpx;
				margin-right: 12rpx;
				padding: 0 12rpx;
				border: 2rpx solid #ff8373;
				border-radius: 5rpx;
				height: 30rpx;
				font-size: 20rpx;
				color: #fff;
				background-color: #f2270c;
				border-color: #f2270c;
			}
			.text::before{
				box-sizing: border-box;
				position: absolute;
				left: -2rpx;
				top: 50%;
				transform: translateY(-50%);
				content:'';
				width:6rpx;
				height: 12rpx;
				background-color: #FFFFFF;
				border: 2rpx solid #ff8373;
				border-radius: 0 6rpx 6rpx 0;
				border-left: none;
			}
			.text::after{
				box-sizing: border-box;
				position: absolute;
				right: -2rpx;
				top: 50%;
				transform: translateY(-50%);
				content:'';
				width:6rpx;
				height: 12rpx;
				background-color: #FFFFFF;
				border: 2rpx solid #ff8373;
				border-radius: 6rpx 0 0 6rpx;
				border-right: none;
			}
		}
		.name{
			color: #262626;
			font-size: 32rpx;
			font-weight: 700;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.desc{
			font-size: 24rpx;
			padding: 36rpx 0 0;
			line-height: 1.3;
			color: #666;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
	// 富文本
	.rich-text{
		padding: 68rpx;
	}
	// 客服 + 购物车 + 购买
	.footer{
		width: calc(100% - 120rpx);
		height: 120rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 0 60rpx;
		z-index: 9;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
		.icon{
			width: 40rpx;
			height: 40rpx;
			display: block;
		}
		.right{
			display: flex;
			align-items: center;
			justify-content: center;
			.cart{
				width: 238rpx;
				height: 80rpx;
				font-size: 30rpx;
				line-height: 80rpx;
				text-align: center;
				color: #8f8f94;
				background-color: #e2e2e2;
				
			}
			.buy{
				width: 238rpx;
				height: 80rpx;
				font-size: 30rpx;
				line-height: 80rpx;
				text-align: center;
				color: #FFFFFF;
				background-color: #354e44;
			}
		}
	}
	// 遮罩层
	.mask{
		width: 100%;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		background-color: rgba(0,0,0,.5);
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: center;
		.card{
			width: calc(628rpx - 112rpx);
			height: calc(926rpx - 112rpx);
			background-color: #FFFFFF;
			border-radius: 40rpx;
			padding: 56rpx;
			.top{
				display: flex;
				justify-content: space-between;
				.img{
					display: block;
					width: 192rpx;
					height: 192rpx;
					border-radius: 10rpx;
					margin-top: -112rpx;
				}
				.text{
					flex-grow: 1;
					width: 200rpx;
					margin-left: 30rpx;
					.name{
						font-size: 28rpx;
						color: #3e3e3e;
						font-weight: 600;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.stock{
						font-size: 24rpx;
						color: #b0b0b0;
						margin-top: 6rpx;
						line-height: 32rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
				.icon{
					display: block;
					width: 42rpx;
					height: 42rpx;
				}
			}
		}
		.info,
		.serve{
			margin: 28rpx auto;
			.title{
				font-size: 28rpx;
				color: #3e3e3e;
				line-height: 40rpx;
				letter-spacing: 4rpx;
				font-weight: 600;
			}
			.text{
				height: 170rpx;
				overflow: auto;
				.box{
					height: 60rpx;
					border: 4rpx solid transparent;
					padding-left: 10rpx;
					color: #3e3e3e;
					font-size: 26rpx;
					line-height: 60rpx;
					background: #f2f4f3;
					border-radius: 20rpx;
					margin: 10rpx;
					display: flex;
					.size{
						margin-left: 20rpx;
					}
				}
				.border{
					border: 4rpx #354e44 solid;
				}
			}
		}
		.serve{
			.text{
				height: 60rpx;
				border: 4rpx solid transparent;
				padding-left: 10rpx;
				color: #3e3e3e;
				font-size: 26rpx;
				line-height: 60rpx;
				background: #f2f4f3;
				border-radius: 20rpx;
				margin: 10rpx;
			}
		}
		.line{
			width: 530rpx;
			height: 2rpx;
			background-color: #f2f4f3;
			margin: 36rpx auto;
		}
		.num{
			display: flex;
			justify-content: space-between;
			.text{
				font-size: 28rpx;
				color: #3e3e3e;
				line-height: 40rpx;
				letter-spacing: 4rpx;
				font-weight: 600;
			}
		}
		.btn{
			    width: 208rpx;
			    height: 80rpx;
			    background: #354e44;
			    border-radius: 28rpx;
			    margin: 48rpx auto;
			    color: #fff;
			    font-size: 32rpx;
			    text-align: center;
			    line-height: 80rpx;
		}
	}
}